<template>
  <div class="genomics-page">

    <div class="main-content">
      <!-- 左侧：数据资源 (30% width) -->
      <div class="left-section">
        <h2 class="section-title">数据资源</h2>
        <el-collapse v-model="activeCollapse" accordion>
          <el-collapse-item name="1">
            <template #title>
              <span class="custom-title">综合核酸数据平台</span>
            </template>
            <div class="collapse-content">
              <p @click="navigateTo('http://111.160.49.98:60/herbalfront')">中药标准核酸序列平台</p>
              <p @click="navigateTo('http://111.160.49.98:60/microbe')">药用微生物资源创新与转化研究平台</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template #title>
              <span class="custom-title">物种信息平台</span>
            </template>
            <div class="collapse-content">
              <p @click="navigateTo('http://42.193.115.86:8082/')">天麻泛基因组分析平台</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="3">
            <template #title>
              <span class="custom-title">敬请期待</span>
            </template>
            <div class="collapse-content">
              <p>内容筹备中</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="4">
            <template #title>
              <span class="custom-title">敬请期待</span>
            </template>
            <div class="collapse-content">
              <p>内容筹备中</p>
            </div>
          </el-collapse-item>
          <el-collapse-item name="5">
            <template #title>
              <span class="custom-title">敬请期待</span>
            </template>
            <div class="collapse-content">
              <p>内容筹备中</p>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <!-- 右侧：热门资源 (70% width) -->
      <div class="right-section">
        <div class="card-grid">
          <div
              v-for="(item, index) in hotResources"
              :key="index"
              class="resource-card"
              @click="navigateTo(item.url)"
          >
            <div class="card-content">
              <img :src="item.image" alt="资源图标" class="card-image">
              <span class="card-title">{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script setup>
import { ref } from 'vue';

// 折叠面板当前激活项
const activeCollapse = ref('0');

// 热门资源列表 (包含图片路径和URL)
const hotResources = ref([
  {
    name: '中药标准核酸序列平台',
    image: '/images/中草药目录管理.png',
    url: 'http://111.160.49.98:60/herbalfront'
  },
  {
    name: '天麻泛基因组分析平台',
    image: '/images/天麻.png',
    url: 'http://42.193.115.86:8082/'
  },
  {
    name: '药用微生物资源创新与转化研究平台',
    image: '/images/天然产物电荷.png',
    url: 'http://111.160.49.98:60/microbe'
  },
  {
    name: '敬请期待',
    image: '/images/logo.svg',
    url: '#'
  },
  {
    name: '敬请期待',
    image: '/images/logo.svg',
    url: '#'
  },
  {
    name: '敬请期待',
    image: '/images/logo.svg',
    url: '#'
  },
  {
    name: '敬请期待',
    image: '/images/logo.svg',
    url: '#'
  },
  {
    name: '敬请期待',
    image: '/images/logo.svg',
    url: '#'
  },
  {
    name: '敬请期待',
    image: '/images/logo.svg',
    url: '#'
  }
]);

// 跳转方法 (当前页面跳转)
const navigateTo = (url) => {
  if (url !== '#') {
    window.location.href = url;
  }
};
</script>

<style scoped>
.genomics-page {
  font-family: Arial, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
}

/* 主要内容布局 */
.main-content {
  display: flex;
  gap: 30px;
  padding: 0 20px;
}

.left-section {
  flex: 3; /* 30% width */
}

.right-section {
  flex: 7; /* 70% width */
}

.section-title {
  color: #36655b;
  font-weight: bold;
  margin-bottom: 20px;
}

/* 折叠面板样式 */
:deep(.el-collapse) {
  border: none;
}

.custom-title {
  color: #36655b;  /* 蓝色字体 */
  font-size: 16px; /* 调大字号 */
  font-weight: bold; /* 加粗 */
  padding-left: 10px; /* 左侧留白 */
}

:deep(.el-collapse-item__header) {
  background-color: #36655b !important;
  color: white !important;
  font-weight: bold;
  padding: 0 15px;
  border-radius: 4px;
  margin-bottom: 5px;
}

:deep(.el-collapse-item__content) {
  padding: 0;
}

.collapse-content {
  background-color: #eef2f4;
  color: #36655b;
  padding: 15px;
  border-radius: 0 0 4px 4px;
}

.collapse-content p {
  margin: 8px 0;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.6;
}

.collapse-content p:hover {
  text-decoration: underline;
}

/* 热门资源卡片样式 */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.resource-card {
  border-bottom: 1px solid #e0e0e0;
  padding: 20px 0; /* 增加上下内边距 */
  height: 100px; /* 设置固定高度 */
  min-height: 100px; /* 设置最小高度 */
  cursor: pointer;
  transition: all 0.3s;
  display: flex; /* 添加flex布局 */
  align-items: center; /* 垂直居中 */
}

.resource-card:hover {
  transform: translateY(-3px);
}

.card-content {
  display: flex;
  align-items: center;
  gap: 15px; /* 增加图片和文字的间距 */
  height: 100%; /* 使内容区域填满卡片高度 */
}

.card-image {
  width: 60px; /* 增大图片尺寸 */
  height: 60px;
  object-fit: cover;
  border-radius: 4px;
}

.card-title {
  color: #36655b;
  font-weight: bold;
  font-size: 16px; /* 增大字体大小 */
}

/* 响应式设计 - 调整卡片高度 */
@media (max-width: 768px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .resource-card {
    height: 90px;
    min-height: 90px;
  }
}

@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: 1fr;
  }

  .resource-card {
    height: 80px;
    min-height: 80px;
  }
}

</style>

